<template>
  <div class="l-echart-wordcloud"
       :style="styleSizeName"
        @click="handleClick">
    <div :ref="id"
         :style="styleChartName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
    mixins:[init],
    data() {
        return {
            dataHandle: []
        }
    },
    methods: {
        updateChart () {
            const optionData = this.$deepClone(this.dataChart) || [];
            this.dataHandle = optionData
            const data = []
            if (this.dataType === 2) {
                if (this.labelKey && this.valueKey && (/^\d+$/.test(optionData[0][this.valueKey]))) {
                    optionData.map( t=> {
                    data.push({
                        'name': t[this.labelKey],
                        'value': t[this.valueKey] - 0
                    })
                })
                }
                
                this.dataHandle = data
            }
            const option = {
                series: [
                {
                    type: "wordCloud",
                    left: "center",
                    top: "center",
                    width: "100%",
                    height: "100%",
                    right: null,
                    bottom: null,
                    sizeRange: (() => {
                    return [
                        this.option.minFontSize || 12,
                        this.option.maxFontSize || 60
                    ];
                    })(),
                    rotationRange: (() => {
                    if (this.option.rotate) {
                        return [-90, 90];
                    } else {
                        return [0, 0];
                    }
                    })(),
                    rotationStep: (() => {
                    if (this.option.rotate) {
                        return 45;
                    } else {
                        return 0;
                    }
                    })(),
                    gridSize: this.option.split || 30,
                    drawOutOfBound: false,
                    textStyle: {
                    normal: {
                        fontFamily: "sans-serif",
                        fontWeight: "bold",
                        color: function () {
                        return (
                            "rgb(" +
                            [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                            ].join(",") +
                            ")"
                        );
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: "#333"
                    }
                    },

                    data: this.dataHandle
                }
                ]
            };
            this.myChart.resize();
            this.myChart.setOption(option, true);
        },
        handleClick() {
            this.clickFormatter && this.clickFormatter({
                data: this.dataHandle
            }, this.getItemRefs());
        },
    }
};
</script>

